<header class="main-header">
	<!-- Logo -->
	<a href="/" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels -->
		<span class="logo-mini"><b>X</b>XW</span> <!-- logo for regular state and mobile devices -->
		<span class="logo-lg"><b>XIXIWAN</b> platform</span>
	</a>
	<!-- Header Navbar: style can be found in header.less -->
	<nav class="navbar navbar-static-top">
		<!-- Sidebar toggle button-->
		<a href="#" class="sidebar-toggle" data-toggle="push-menu"
			role="button"> <span class="sr-only">Toggle navigation</span>
		</a>

		<div class="navbar-custom-menu">
			<ul class="nav navbar-nav">
				<!-- Messages: style can be found in dropdown.less-->
				<li class="dropdown messages-menu"><a href="#"
					class="dropdown-toggle" data-toggle="dropdown"> <i
						class="fa fa-envelope-o"></i> <span class="label label-success">4</span>
				</a>
					<ul class="dropdown-menu">
						<li class="header">You have 4 messages</li>
						<li>
							<!-- inner menu: contains the actual data -->
							<ul class="menu">
								<li>
									<!-- start message --> <a href="#">
										<div class="pull-left">
											<img src="/modules/AdminLTE/img/user2-160x160.jpg"
												class="img-circle" alt="User Image">
										</div>
										<h4>
											Support Team <small><i class="fa fa-clock-o"
												aria-hidden="true"></i> 5 mins</small>
										</h4>
										<p>Why not buy a new awesome theme?</p>
								</a>
								</li>
								<!-- end message -->
								<li><a href="#">
										<div class="pull-left">
											<img src="/modules/AdminLTE/img/user3-128x128.jpg"
												class="img-circle" alt="User Image">
										</div>
										<h4>
											AdminLTE Design Team <small><i class="fa fa-clock-o"
												aria-hidden="true"></i> 2 hours</small>
										</h4>
										<p>Why not buy a new awesome theme?</p>
								</a></li>
								<li><a href="#">
										<div class="pull-left">
											<img src="/modules/AdminLTE/img/user4-128x128.jpg"
												class="img-circle" alt="User Image">
										</div>
										<h4>
											Developers <small><i class="fa fa-clock-o"
												aria-hidden="true"></i> Today</small>
										</h4>
										<p>Why not buy a new awesome theme?</p>
								</a></li>
								<li><a href="#">
										<div class="pull-left">
											<img src="/modules/AdminLTE/img/user3-128x128.jpg"
												class="img-circle" alt="User Image">
										</div>
										<h4>
											Sales Department <small><i class="fa fa-clock-o"
												aria-hidden="true"></i> Yesterday</small>
										</h4>
										<p>Why not buy a new awesome theme?</p>
								</a></li>
								<li><a href="#">
										<div class="pull-left">
											<img src="/modules/AdminLTE/img/user4-128x128.jpg"
												class="img-circle" alt="User Image">
										</div>
										<h4>
											Reviewers <small><i class="fa fa-clock-o"
												aria-hidden="true"></i> 2 days</small>
										</h4>
										<p>Why not buy a new awesome theme?</p>
								</a></li>
							</ul>
						</li>
						<li class="footer"><a href="#">See All Messages</a></li>
					</ul></li>
				<!-- Notifications: style can be found in dropdown.less -->
				<li class="dropdown notifications-menu"><a href="#"
					class="dropdown-toggle" data-toggle="dropdown"> <i
						class="fa fa-bell-o"></i> <span class="label label-warning"
						id="noticeTotal1"></span>
				</a>
					<ul class="dropdown-menu">
						<li class="header" id="noticeTotal2"></li>
						<li>
							<!-- inner menu: contains the actual data -->
							<ul class="menu" id="notice">
							</ul>
						</li>
						<li class="footer"><a href="#">查看全部</a></li>
					</ul></li>
				<!-- Tasks: style can be found in dropdown.less -->
				<li class="dropdown tasks-menu"><a href="#"
					class="dropdown-toggle" data-toggle="dropdown"> <i
						class="fa fa-flag-o"></i> <span class="label label-danger">9</span>
				</a>
					<ul class="dropdown-menu">
						<li class="header">You have 9 tasks</li>
						<li>
							<!-- inner menu: contains the actual data -->
							<ul class="menu">
								<li>
									<!-- Task item --> <a href="#">
										<h3>
											Design some buttons <small class="pull-right">20%</small>
										</h3>
										<div class="progress xs">
											<div class="progress-bar progress-bar-aqua"
												style="width: 20%" role="progressbar" aria-valuenow="20"
												aria-valuemin="0" aria-valuemax="100">
												<span class="sr-only">20% Complete</span>
											</div>
										</div>
								</a>
								</li>
								<!-- end task item -->
								<li>
									<!-- Task item --> <a href="#">
										<h3>
											Create a nice theme <small class="pull-right">40%</small>
										</h3>
										<div class="progress xs">
											<div class="progress-bar progress-bar-green"
												style="width: 40%" role="progressbar" aria-valuenow="20"
												aria-valuemin="0" aria-valuemax="100">
												<span class="sr-only">40% Complete</span>
											</div>
										</div>
								</a>
								</li>
								<!-- end task item -->
								<li>
									<!-- Task item --> <a href="#">
										<h3>
											Some task I need to do <small class="pull-right">60%</small>
										</h3>
										<div class="progress xs">
											<div class="progress-bar progress-bar-red" style="width: 60%"
												role="progressbar" aria-valuenow="20" aria-valuemin="0"
												aria-valuemax="100">
												<span class="sr-only">60% Complete</span>
											</div>
										</div>
								</a>
								</li>
								<!-- end task item -->
								<li>
									<!-- Task item --> <a href="#">
										<h3>
											Make beautiful transitions <small class="pull-right">80%</small>
										</h3>
										<div class="progress xs">
											<div class="progress-bar progress-bar-yellow"
												style="width: 80%" role="progressbar" aria-valuenow="20"
												aria-valuemin="0" aria-valuemax="100">
												<span class="sr-only">80% Complete</span>
											</div>
										</div>
								</a>
								</li>
								<!-- end task item -->
							</ul>
						</li>
						<li class="footer"><a href="#">View all tasks</a></li>
					</ul></li>
				<!-- User Account: style can be found in dropdown.less -->
				<li class="dropdown user user-menu"><a href="#"
					class="dropdown-toggle" data-toggle="dropdown"> <img
						th:src="${sysUser.avatar}" class="user-image" alt="User Image">
						<span class="hidden-xs" th:text="${sysUser.username}"></span>
				</a>
					<ul class="dropdown-menu">
						<!-- User image -->
						<li class="user-header"><img th:src="${sysUser.avatar}"
							class="img-circle" alt="User Image" onclick="editAvatar()">

							<p>
								<strong th:text="${sysUser.username}"></strong> <small
									th:text="${sysUser.email}"></small>
							</p></li>
						<!-- Menu Body -->
						<li class="user-body">
							<div class="row">
								<div class="col-xs-6 text-center">
									<a href="javascript:void(0)" onclick="changePersonal()">修改资料</a>
								</div>
								<div class="col-xs-6 text-center">
									<a href="javascript:void(0)" onclick="changePassword()">修改密码</a>
								</div>
							</div> <!-- /.row -->
						</li>
						<!-- Menu Footer-->
						<li class="user-footer">
							<div class="pull-left">
								<a href="javascript:void(0)" onclick="lockScreen()"
									class="btn btn-default btn-flat"><i class="fa fa-lock"
									aria-hidden="true"></i> 锁屏</a>
							</div>
							<div class="pull-right">
								<a href="/logout" class="btn btn-default btn-flat"><i
									class="fa fa-sign-out" aria-hidden="true"></i> 注销</a>
							</div>
						</li>
					</ul></li>
				<!-- Control Sidebar Toggle Button -->
				<li><a href="#" data-toggle="control-sidebar"><i
						class="fa fa-gears"></i></a></li>
			</ul>
		</div>
	</nav>
</header>
<script type="text/javascript">
	function lockScreen() {
		parent.layer.open({
			type : 2,
			title : false,
			area : [ (window.screen.width) + 'px', (window.screen.height) + 'px' ],
			closeBtn : 0,
			content : '/unlockScreen?refresh=false'
		});
	}

	function changePersonal() {
		parent.layer.open({
			type : 2,
			title : '修改资料',
			area : [ 'auto', '540px' ],
			content : '/sys/user/changePersonal'
		});
	}

	function changePassword() {
		parent.layer.open({
			type : 2,
			title : '修改密码',
			area : [ 'auto', '360px' ],
			content : '/sys/user/changePassword'
		});
	}

	function readNotice(id) {
		parent.layer.open({
			type : 2,
			title : '阅读通知',
			area : [ 'auto', '360px' ],
			content : '/sys/noticeUser/readNotice?id=' + id
		});
	}

	var getNotice = function() {
		$.ajax({
			type : 'get',
			url : '/sys/notice/selectUserNoticeByForm',
			data : {
				status : 2,
				isread : 0
			},
			success : function(result) {
				if (result != null && result.data != null) {
					var li = '';
					if (result != null && result.data != null) {
						var length = result.data.length;
						$('#noticeTotal1').html(length);
						$('#noticeTotal2').html('你有' + length + '个通知');
						$.each(result.data, function(index, element) {
							li += '<li><a href="javascript:void(0)" onclick="readNotice(' + element.nuid
									+ ')"> <i class="fa '+element.icon+'" aria-hidden="true"></i>' + element.title
									+ '</a></li>';
						});
					}
					$('#notice').empty();
					$('#notice').append(li);
				}
			}
		});
	}

	$(function() {
		getNotice();
	});
</script>